<template>
    <van-nav-bar title="商品详情" left-text="返回" left-arrow @click-left="onClickLeft" />
    <van-image width="100%" height="200" :src="productData.img" @click="showimg" />

    <van-row justify="space-between">
        <van-col span="18" class="title">{{ productData.name }}</van-col>
        <van-col span="6" class="price">￥{{ productData.price }}</van-col>
    </van-row>
    <div class="icon">
        <span><van-icon name="star-o" />收藏</span>
        <span><van-icon name="share" />转发</span>
        <span><van-icon name="gold-coin-o" />降价通知</span>
    </div>
    <div class="brief">
        <!---如果后台传递过来的数据包含html-->
        <div v-html="productData.brief"></div>
    </div>

    <van-action-bar>
      <van-action-bar-icon icon="chat-o" text="客服" @click="onClickIcon" />
      <van-action-bar-icon icon="cart-o" text="购物车" @click="onClickIcon" />
      <van-action-bar-icon icon="shop-o" text="店铺" @click="onClickIcon" />
      <van-action-bar-button type="danger" text="立即购买" @click="onClickButton" />
    </van-action-bar>

</template>
<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue';
import { showImagePreview } from 'vant';
import { showToast } from 'vant';
import { ProductApi } from '@/api';
import { useRoute } from 'vue-router';
let route=useRoute()

const productData = reactive({
    name: '',
    price: 0,
    img:"",
    brief:""
})

//点击弹出图片
const showimg = () => { 

    showImagePreview({
        images: imgArray.value,
        startPosition: 1,
        closeable:true
    });
}
//定义id
const id=ref(0)

onMounted(() => { 
    //console.log(route.query.id);
    id.value = route.query.id== undefined ? 0 : Number(route.query.id)
    console.log(id.value);
    CallProductApi()
})

//构建图片数组用来展示多个图片信息
let imgArray=ref([])

//获取后台的数据
const CallProductApi = () => { 
    ProductApi.select.call({id:id.value}).then((res: any) => { 
        console.log(res);
        productData.name = res[0].name
        productData.price = res[0].price
        productData.img= res[0].img
        productData.brief=res[0].brief

        imgArray.value = productData.img.split(",")
    })
}




const onClickIcon = () => showToast('点击图标');
const onClickButton = () => showToast('点击按钮');
const onClickLeft = () => history.back();
</script>
<style scoped>
.title{
    padding-left: 15px;
    padding-right: 5px;
    margin-bottom: 10px;
    font: 700 15px Arial,"microsft yahei";
    color: black;
    line-height: 20px;
}
.price{
    color: red;
    font-weight: 700;
    font-size: 19px;
    padding-left: 15px;
}
.icon{
    background: #ded9d9;
    font-size: 12px;
    padding-left: 30px;
    font-weight: 500;
}
.icon span{
    padding-left: 40px;
}
.brief{
    color: #7e7b7b;
    font-size: 16px;
    line-height: 16px;
    padding-left: 15px;

}
.brief img{
    width: 100%;
}
</style>
 